<!-- SOP责任人同步 -->
<template>
  <dt-modal-info ref="infoRef" title="SOP责任人同步" :width="550">
    <div style="max-height: 500px; overflow-y: scroll">
      <div v-for="i in list" :key="i.id">
        <div style="display: flex; line-height: 50px; border-bottom: 1px #eee solid">
          <div>{{ i.sopName }}</div>
          <div style="flex: 1"></div>
          <Button
            style="margin-top: 10px; margin-right: 10px"
            type="primary"
            :loading="i.isSyncing"
            :disabled="i.isSync || isSyncing"
            @click="onSync(i)">
            {{ i.isSync ? '已同步' : '同步' }}
          </Button>
        </div>
      </div>
    </div>
  </dt-modal-info>
</template>

<script setup>
  import { ref } from 'vue'
  import mgr from '../biz/responsibleSync.js'
  import sopApi from '@/biz/buildingManagement/sopConfig'

  const infoRef = ref()
  const list = ref([])
  const isSyncing = ref()
  let tmpData = {}

  function onSync(i) {
    isSyncing.value = true
    i.isSyncing = true
    sopApi
      .leaderOrgListSave({ ...tmpData, configId: i.id })
      .then((res) => {
        i.isSync = true
        i.isSyncing = false
        isSyncing.value = false
      })
      .catch(() => {
        i.isSyncing = false
        isSyncing.value = false
      })
  }

  defineExpose({
    show: (data) => {
      tmpData = data
      console.log(data)
      mgr.list(data.roleId).then((res) => {
        list.value = res.map((itm) => {
          itm.isSync = false
          itm.isSyncing = false
          return itm
        })
      })
      infoRef.value.show()
    }
  })
</script>
<style lang="scss" scoped></style>
